<template>
    <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
    <el-table :data="
        filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    " style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <!-- 添加输入框 -->
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
        </el-table-column>
        <!-- 添加删除和修改按钮 -->
        <el-table-column>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
        <!-- 添加删除和修改按钮 -->
    </el-table>
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="store.state.tableData.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
    <UpdateDialog :index="changeindex"></UpdateDialog>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import UpdateDialog from "./UpdateDialog.vue";
// 引用useStore
import { useStore } from "vuex";
// 得到store对象
const store = useStore();
// 设置需要的参数与方法
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const search = ref('')
// 使用计算属性处理数据
// 修改下面从vuex读取
const filterTableData = computed(() =>
    store.state.tableData.filter(
        (data: any) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
);
// 修改下面得方法
const handleSizeChange = (val: number) => {
    pageSize4.value = val;
};
const handleCurrentChange = (val: number) => {
    currentPage4.value = val;
};
// 添加删除和修改按钮方法与接口
interface User {
    date: string;
    name: string;
    address: string;
}
const changeindex=ref(-1)
const handleEdit = (index: number, row: User) => {
    changeindex.value=index
    // 调用vuex修改
    store.commit("SET_DIALOG")
};

const handleDelete = (index: number, row: User) => {
    store.state.tableData.splice(index,1)
};

</script>
<style>

</style>